<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <div>
          <div>
            <el-row>
              <el-card class="infoCard">
                <h2 class="textcenter">Lpa/诺唯赞/QD-S1200</h2>
                <h2 class="textcenter">Lpa/诺唯赞/QD-S2000</h2>
                <h2 class="textcenter">钾/诺唯赞/QD-S2000</h2>
                <h2 class="textcenter">ALB/诺唯赞/QD-S1200</h2>
                <div class="textcenter">
                  <el-button type="primary">按仪器排</el-button>
                  <el-button type="warning">按项目排</el-button>
                </div>
              </el-card>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <el-form ref="form" class="form">
            <el-row>
              <el-col :span="8">
                <el-form-item label="仪器型号:" label-width="20%">QD-S2000</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="统计月份:" label-width="20%">
                  <el-date-picker v-model="value1" type="date" placeholder="选择月份">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button type="warning" @click.native="handleOpenHistory">查看历史月底报告</el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-divider/>
          <el-table
            :data="checkList"
            :span-method="objectSpanMethod"
            border
            style="width: 100%;"
          >
            <el-table-column label="名称" width="180" align="left" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="水平名称" align="left" prop="type" :show-overflow-tooltip="true" />
            <el-table-column label="数据类型" align="left" prop="dataType" />
            <el-table-column label="数据点" align="left" prop="dataMarker" />
            <el-table-column label="均值" align="left" prop="average" />
            <el-table-column label="SD" align="left" prop="SD" />
            <el-table-column label="CV%" align="left" prop="CV" />
            <el-table-column label="± 1SD" align="left" prop="SD1" />
            <el-table-column label="± 2SD" align="left" prop="SD2" />
            <el-table-column label="± 3SD" align="left" prop="SD3" />
            <el-table-column label="CVBI" align="left" prop="CVBI" />
            <el-table-column label="CVI" align="left" prop="CVI" />
            <el-table-column label="SDI" align="left" prop="SDI" />
            <el-table-column label="失控率%" align="left" prop="outControlRate" />
          </el-table>
          <h2><el-button type="primary">生成报告</el-button></h2>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import echarts from "../components/echarts";

export default {
  name: "detail",
  components: {
    echarts
  },
  props: {
  },
  data() {
    return {
      user: {},
      activeTab: "putInList",
      deviceInfo: {},
      checkList: [],
      value1: ''
    };
  },
  created() {
    this.handleLoadAndQuery()
  },
  methods: {
    handleLoadAndQuery() {
      let row = {
        name:'(ASO)抗链球菌溶血素 O 抗体(IU/mL)',
        type:'水平1',
        dataType:'当月数据',
        dataMarker:'31',
        average:'224.39',
        SD:'3.83',
        CV:'1.71%',
        SD1:'77%',
        SD2:'100%',
        SD3:'100%',
        CVBI:'21%',
        CVI:'0',
        SDI:'0',
        outControlRate:'0'
      }
      let row2 = {
        name:'质控规则:W:1-2s   R:1-3s  2-2s  R-4s',
        type:'水平1',
        dataType:'上月数据',
        dataMarker:'31',
        average:'224.39',
        SD:'3.83',
        CV:'1.71%',
        SD1:'77%',
        SD2:'100%',
        SD3:'100%',
        CVBI:'21%',
        CVI:'0',
        SDI:'0',
        outControlRate:'0'
      }
      let row3 = {
        name:'(RF)类风湿因子(IU/mL)',
        type:'水平2',
        dataType:'当月数据',
        dataMarker:'31',
        average:'224.39',
        SD:'3.83',
        CV:'1.71%',
        SD1:'77%',
        SD2:'100%',
        SD3:'100%',
        CVBI:'21%',
        CVI:'0',
        SDI:'0',
        outControlRate:'0'
      }
      let row4 = {
        name:'质控规则:W:1-2s   R:1-3s  2-2s R-4s',
        type:'水平2',
        dataType:'上月数据',
        dataMarker:'31',
        average:'224.39',
        SD:'3.83',
        CV:'1.71%',
        SD1:'77%',
        SD2:'100%',
        SD3:'100%',
        CVBI:'21%',
        CVI:'0',
        SDI:'0',
        outControlRate:'0'
      }
      this.checkList.push(row)
      this.checkList.push(row2)
      this.checkList.push(row3)
      this.checkList.push(row4)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
    handleClose() {
      this.$emit('close', false)
    },
    handleOpenHistory() {
      this.$router.push({path:"/report/components/history?title=历史月度分析报告"})
    }
  }
};
</script>
